<!DOCTYPE html>
<html>
  <head>
    <title>d07.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  	<style>
  		.s1{
  			color:red;
  		}
  		.s2{
  			font-size:20px;
  		}
  	</style>
  	<script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
  	<script type="text/javascript">
  		$(function(){
  			$('#a1').click(function(){
  				var $obj=$('#d1').children('div');
  				alert($obj.length);
  				$obj.css('font-size','60px');
  				
  				$('#d3').next().css('font-size','60px');
  				$('#d3').next('p').css('font-size','60px');
  				
  				$('#d3').prev().css('font-size','60px');
  				
  				$('#d3').siblings().css('font-size','60px');
  				$('#d3').siblings('div').css('font-size','60px');
  				
  				$('#d1').find('p').css('font-size','60px');
  				
  				alert($('#d3').parent().attr('id'));
  			});
  		});
  	</script>
  </head>
  <body>
  	<!-- 遍历节点 -->
  	<!-- 
  		children()/children(selector):只考虑子元素，不考虑其它后代
  		next()/next(selector):下一个兄弟
  		prev()/prev(selector):上一个兄弟
  		siblings()/siblings(selector):其它兄弟
  		find(selector):查找满足选择器的所有后代
  		parent():父节点(没有选择器)
  	 -->
  	 <div id="d1">
  	 	<div id="d2">hello 1</div>
  	 	<div id="d3">hello 2</div>
  	 	<div id="d4">hello 3</div>
  	 	<p>hello 4</p>
  	 </div>
  	 <a href="javascript:;" id="a1">遍历节点</a>
  </body>
</html>
